<template>
  <div class="ScoreFRight" @scroll="scrollEvent">
    <EvaluationHeader></EvaluationHeader>
    <ul class="tag_list_ul">
      <!-- {tagActivity:Check ==index}动态切换class item.name==='全部'?'tagActivity':''||item.name==='不满意'?'unsatisfied':'' -->
      <li v-for="(item,index) in classification" :key="index" :class="{tagActivity:Check ==index}" @click="AddCheck(index,item.name)">{{item.name}}({{item.count}})</li>
    </ul>
    <Scorebottom></Scorebottom>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import EvaluationHeader from '@/views/Details/Evaluation/EvaluationHeader/EvaluationHeader.vue'
import Scorebottom from '@/views/Details/Scorebottom/Scorebottom.vue'
export default {
  components: {
    EvaluationHeader,
    Scorebottom
  },
  data() {
    return {
      Check: 0,
      tag_name: '',
      // 请求数据条数
      offset1: 10
    }
  },
  computed: {
    ...mapState(['classification'])
  },
  methods: {
    AddCheck(index, name) {
      this.Check = index
      // this.tag_name = name
      const obj = {
        restaurant_id: window.sessionStorage.getItem('shopid'),
        tag_name: toString(name),
        offset: 0,
        limit: 10,
        offset: 10
      }
      this.tag_name = name
      this.$store.dispatch('getRatings', obj)
    },
    // 滚到底部触发
    scrollEvent(e) {
      if (parseInt(e.srcElement.scrollTop.toFixed()) + e.srcElement.clientHeight === e.srcElement.scrollHeight) {
        const obj = {
          restaurant_id: window.sessionStorage.getItem('shopid'),
          tag_name: this.tag_name,
          offset: this.offset1,
          limit: 10
        }
        this.$store.dispatch('getRatings', obj)
        this.offset1 += 10
      }
    }
  },
  mounted() {
    //评价分数
    this.$store.dispatch('getScore', window.sessionStorage.getItem('shopid'))
    // 评价分类
    this.$store.dispatch('classification', window.sessionStorage.getItem('shopid'))
  }
}
</script>
<style lang="less" scoped>
.ScoreFRight {
  height: 139vw !important;
  // height: 100% !important;
  overflow-y: auto !important;
}
.tagActivity {
  background-color: #3190e8 !important;
  color: #fff !important;
}
.tag_list_ul {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  padding: 0.5rem;
  li {
    font-size: 0.6rem;
    color: #6d7885;
    padding: 0.3rem;
    background-color: #ebf5ff;
    border-radius: 0.2rem;
    border: 1px;
    margin: 0 0.39rem 0.2rem 0;
  }
  li:nth-of-type(3) {
    background-color: #f5f5f5;
    color: #aaa;
  }
}
</style>